import { defineComponent, defineAsyncComponent } from 'vue';
import { getAchieve } from "@/api/home"
import SheltV2 from '../../common/SheltV2';
import Echarts from '@/components/Echarts';
import { ElOption, ElCheckbox, ElSelect, ElCheckboxGroup, ElDatePicker } from 'element-plus';
import "./index.less"
import ItemTable from './ItemTable';

export default defineComponent({
    name: 'GroupPerformance',
    props: ["column"],
    setup(props) {
        const data = ref({}) as AnyObject;
        const itemTableRef = ref();
        const selectMember = ref([]) as any;
        const isIndeterminate = ref(false);
        const isPersonal = props.column?.includes("4");
        const selectedMonth = ref(new Date());

        const checkedAll = ref(true);
        const option = ref({
            color: ['#5470C6', '#EE6666'],
            tooltip: {
                trigger: 'axis'
            },

            legend: {
                icon: "circle",
                itemGap: 20,
                left: 15,
                itemWidth:10
            },
            grid: {
                left: 80,
                right: 25
            },
            xAxis: [
                {
                    boundaryGap: false,
                    type: 'category',
                    axisTick: {
                        show: false
                    },

                    axisLine: {
                        // onZero: false,
                        show: false,
                        lineStyle: {
                            color: '#666'
                        }
                    },
                    data: []
                },
                {
                    boundaryGap: false,
                    show: false,
                    data: [],
                }
            ],
            yAxis: [
                {
                    type: 'value', splitLine: { lineStyle: { type: "dashed" }, axisPointer: { show: false } },
                }
            ],
            series: [
                {
                    areaStyle: {},
                    name: '实际业绩',
                    type: 'line',
                    xAxisIndex: 1,
                    smooth: true,
                    data: [
                        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                    ],
                    symbol: "none",
                },
                {
                    symbol: "none",
                    areaStyle: {},
                    name: '目标业绩',
                    type: 'line',
                    smooth: true,
                    data: [
                        3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
                    ]
                }
            ]
        }) as any;

        const detailSlots = ref({
            detail: () => {
                return <div class="chart_right">
                    {!isPersonal && <ElSelect
                        v-model={selectMember.value}
                        multiple
                        collapse-tags
                        onChange={selectChange}
                        max-collapse-tags={2}
                    >
                        {/* <ElCheckboxGroup v-model={selectMember.value} onChange={handleCheckAll}>

                        </ElCheckboxGroup> */}
                        <ElOption class="all_member_option" label="全员" value="">
                            { /* @ts-ignore */}
                            <ElCheckbox indeterminate={isIndeterminate.value} checked={checkedAll.value} v-model={checkedAll.value} onClick={handleCheckAll} label="全员" />
                        </ElOption>
                        <ElCheckboxGroup onChange={handleSelect as any} v-model={selectMember.value} >
                            {data.value.name?.map((_name: string, _index: number) => <ElOption
                                class="other_member_option"
                                key={_index}
                                label={_name}
                                value={_name}
                            >
                                <ElCheckbox label={_name} />
                            </ElOption>)}
                        </ElCheckboxGroup>



                    </ElSelect>}
                    <ElDatePicker
                        v-model={selectedMonth.value}
                        type="month"
                        class="month_selector"
                        range-separator="/"
                        clearable={false}
                        // @ts-ignore
                        onChange={selectMonth}
                    />
                </div>

            }
        })
        const selectMonth = () => {
            const month = ("" + (selectedMonth.value.getMonth() + 1)).padStart(2, "0");
            const year = selectedMonth.value.getFullYear();
            getAchieveData({ team_name: selectMember.value.join(","), month: year + "-" + month })
        }
        const selectChange = (val: any) => {
            JSON.stringify(val) === '[""]' && (selectMember.value = [])
            const month = ("" + (selectedMonth.value.getMonth() + 1)).padStart(2, "0");
            const year = selectedMonth.value.getFullYear();
            getAchieveData({ team_name: val.join(","), month: year + "-" + month })
            window.event?.preventDefault();
            return false;

        }
        const handleCheckAll = (val: boolean) => {
            checkedAll.value = !checkedAll.value;
            selectMember.value = checkedAll.value ? data.value.name : [];
            isIndeterminate.value = false;


        }
        // 线路下拉框选择事件
        const handleSelect = (value = []) => {
            console.log("触发不了");
            const checkedCount = value.length;
            checkedAll.value = checkedCount === data.value.name.length;
            
            isIndeterminate.value = checkedCount > 0 && checkedCount < data.value.name.length;
        }
        getAchieveData();
        function getAchieveData(params = {}) {
            getAchieve(params).then((res: AnyObject) => {
                isPersonal ? (data.value = { performance: res.data.personal, table: res.data.personal_table }) : (data.value = { name: res.data.team_name, performance: res.data.team, table: res.data.team_table });
                option.value.xAxis[0].data = data.value.table.month;
                option.value.xAxis[1].data = data.value.table.month;
                option.value.series[0].data = data.value.table.finish;
                option.value.series[1].data = data.value.table.target;
                JSON.stringify(params) === "{}" && (selectMember.value = data.value.name);
            })
        }

        const viewDetail = () => {
            itemTableRef.value.dialogVisible = true;
        }

        return () => (

            <SheltV2 title={isPersonal ? "我的业绩" : "团队业绩"} more="查看详情" question="<div><p>【该数据每日凌晨更新一次】</p><p>团队业绩数据来源于BI，展示本人领导的团队相关的月度、季度、年度的销售收入、销售目标、销售达成率。</p></div>" v-slots={detailSlots.value} onViewDetail={viewDetail}>
                <Echarts option={option.value} />
                <div class="return flex-start">
                    <div class="return_item">
                        <div class="title">月度已达成(万元)</div>
                        <div class="num">{data.value.performance?.month_finish}</div>
                        <div class="fill">月度目标<span>{data.value.performance?.month_target}</span>达成率<span>{data.value.performance?.month_rate}</span></div>
                    </div>
                    <div class="return_item">
                        <div class="title">季度已达成(万元)</div>
                        <div class="num">{data.value.performance?.quarter_finish}</div>
                        <div class="fill">季度目标<span>{data.value.performance?.quarter_target}</span>达成率<span>{data.value.performance?.quarter_rate}</span></div>
                    </div>
                    <div class="return_item">
                        <div class="title">年度已达成(万元)</div>
                        <div class="num">{data.value.performance?.year_finish}</div>
                        <div class="fill">年度目标<span>{data.value.performance?.year_target}</span>达成率<span>{data.value.performance?.year_rate}</span></div>
                    </div>


                </div>
                <ItemTable ref={itemTableRef} is_team={1} all_team_name={data.value.name} team_name={selectMember.value} />
            </SheltV2>
        );
    }
});
